
<!--
 * @页面名称:
 * @描述:
 * @作者: 嘉宾
 * @Date: 2020-07-16 10:07:41
-->
<template>
  <div class="test">
    <a-button @click="loadData">加载数据</a-button>
    <ul id="tree" class="ztree"></ul>
  </div>
</template>

<script>
import $ from 'jquery'
import 'ztree'
import 'ztree/css/zTreeStyle/zTreeStyle.css'
export default {
  name: '',
  components: {},
  data () {
    return {
      setting: {
        data: {
          key: {
            name: 'title'
          }
        },
        view: {
          selectedMulti: false
        },
        check: {
          enable: true
        }
      }
    }
  },
  created () {
  },
  mounted () {
    // $.fn.zTree.init($('#tree'), this.setting, this.zTreeNodes)
    // this.ztreeInit()
  },
  methods: {
    loadData () {
      this.ztreeInit()
    },
    ztreeInit () {
      const param = { searchList: [{ FM_ID: '1304229574116249600' }], flag: 2, order: [{ Order: 1, Param: 'Catalog_Order' }] }
      this.$vueAjax.get('Sys_Base_Catalog/get', param).then(res => {
        console.log(res)
        const catalogTreeList = this.convertToTreeData(res.List, null)
        $.fn.zTree.init($('#tree'), this.setting, catalogTreeList)
      })
    },
    convertToTreeData (data, pid) {
      const result = []
      let temp = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].Catalog_Father === pid) {
          const obj = { ...data[i], title: `${data[i].Catalog_Code} ${data[i].Catalog_Name}`, key: data[i].Catalog_ID }
          temp = this.convertToTreeData(data, data[i].Catalog_ID)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    }
  }
}
</script>
<style lang="less" scoped>
.test {
  width: 100%;
  height: 100%;
}
</style>
